<!-- 布局组件 -->
<template>
    <LeftMenuPartial/>
    <ContentContainerPartial>
      <!-- 这里将父组件传递的内容传递给下去 -->
      <slot></slot>
    </ContentContainerPartial>
    <ControlPanelPartial/>
</template>

<script>
import LeftMenuPartial from './LeftMenuPartial.vue';
import ControlPanelPartial from './ControlPanelPartial.vue';
import ContentContainerPartial from './ContentContainerPartial.vue';

import ScriptLoader from '../common/LoadExternalScript.vue';
import {onMounted} from 'vue';

export default {
  name: 'LayoutPartial',
  components:{
      LeftMenuPartial,
      ControlPanelPartial,
      ContentContainerPartial
  },
  setup:function(){
    onMounted(()=>{
      // 这种方式加载脚本的目的是为了页面dom渲染完成后在加载外部js，用来初始化页面dom的样式
      ScriptLoader.appendScriptToBodyAfter("/js/core/popper.min.js",false);
      ScriptLoader.appendScriptToBodyAfter("/js/core/bootstrap.min.js",false);
      ScriptLoader.appendScriptToBodyAfter("/js/plugins/perfect-scrollbar.min.js",false);
      ScriptLoader.appendScriptToBodyAfter("/js/plugins/smooth-scrollbar.min.js",false);
      ScriptLoader.appendScriptToBodyAfter("/js/buttons.js",true);
      ScriptLoader.appendScriptToBodyAfter("/js/material-dashboard.min.js",false);
    });
  }
}
</script>